<template>
  <div class="forget-box">
    <div class="content-box">
      <div class="forget-title">
        修改手机号
      </div>
      <div>
        <el-form ref="forgetFormRef" style="margin-top:20px" :model="forgetForm" :rules="forgetRules">
          <el-row>
            <el-col :span="12">
              <el-form-item prop="newPhone" label="新手机号码">
                <el-input style="width:90%;" v-model="forgetForm.newPhone" maxlength="11" clearable placeholder="请输入登录的手机号码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="verificationCode" label="验证码">
                <el-input style="width:90%;" class="append" maxlength="6" v-model="forgetForm.verificationCode"
                  placeholder="请输入验证码" />
                <el-button style="margin-left:10px;" :disabled="(countNum && countNum > 0) ? true : false"
                  @click="getCode">{{ (countNum && countNum > 0) ? countNum+'秒后重试' : '获取验证码'}}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="password" style="margin-top:20px" label="当前登录密码">
                <el-input style="width:90%;" v-model="forgetForm.password" type="password" show-password placeholder="请输入密码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="btn-box">
        <div @click="confirm">确认修改</div>
        <el-link style="margin-top:10px;" type="primary" @click="backHandle">返回</el-link>
      </div>
    </div>
  </div>
</template>

<script>
import { onBeforeUnmount, reactive, ref, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { successDeal, warningDeal } from '@/utils/utils'
import api from './api'
import hexMD5 from "@/utils/md5.min.js"
export default {
  setup() {
    const router = useRouter()

    const forgetFormRef = ref(null)

    const validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请再次确认密码'))
      }
      if (value != state.forgetForm.password) {
        callback(new Error('两次密码不相同'))
      }
      if (value === state.forgetForm.password) {
        callback()
      }
    }
    const smsCodePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入验证码'))
      }
      if (!state.forgetForm.verificationCode || value.length < 6) {
        callback(new Error('请输入正确的验证码'))
      } else {
        callback()
      }
    }

    const state = reactive({
      myTimer: null,
      countNum: null,
      forgetForm: {},
      forgetRules: {
        newPhone: [
          { required: true, message: '请输入新手机号', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '手机号码格式不正确', trigger: 'blur'
          }
        ],
        verificationCode: [
          { required: true, validator: smsCodePass, trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入当前登录密码', trigger: 'blur' },
          // {
          //   pattern: /^[a-zA-Z0-9]{6,}$/, message: '请输入6位以上且只包含数字、字母的密码', trigger: 'blur'
          // },
        ],
        confirmPassword: [
          { required: true, validator: validatePass, trigger: 'blur' },
        ],
      },
    })

    function backLogin() {
      router.push({ path: '/' })
    }

    function backHandle() {
      router.go(-1)
    }

    function getCode() {
      forgetFormRef.value.validateField('phone', (valid, fields) => {
        if (valid) {
          const obj = {
            phone: state.forgetForm.phone,
            source: 3,
            type: 3,
          }
          api.getSmsCode(obj).then(res => {
            if (res.code == '200') {
              state.countNum = 60
              setTimer()
            } else {
              state.countNum = null
              warningDeal(res.msg)
            }
          }).catch(err => {
            state.countNum = null
            console.log(err)
          })
        }
      })
    }

    function setTimer() {
      clearInterval(state.myTimer)
      state.myTimer = setInterval(() => {
        state.countNum--
        if (state.countNum <= 0) {
          state.countNum = null
          clearInterval(state.myTimer)
        }
      }, 1000);
    }

    function confirm() {
      forgetFormRef.value.validate((valid, fields) => {
        if (valid) {
          const obj = {
            newPhone: state.forgetForm.newPhone,
            password: hexMD5(state.forgetForm.password),
            verificationCode: state.forgetForm.verificationCode,
            source: 3,
          }
          api.forgetResetPwd(obj).then(res => {
            if (res.code == '200') {
              successDeal(res.msg)
              backLogin()
            } else {
              warningDeal(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        }
      })
    }

    onBeforeUnmount(() => {
      clearInterval(state.myTimer)
    })

    return {
      ...toRefs(state),
      forgetFormRef,
      backLogin,
      backHandle,
      getCode,
      confirm,
    }
  }
}
</script>

<style lang="scss" scoped>
.forget-box {
  width: 100%;
  height: 100%;
  background-color: #336feb;
  display: flex;
  .content-box {
    width: 800px;
    margin: auto;
    background-color: #ffffff;
    border-radius: 5px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 50px;
    .forget-title {
      text-align: center;
      font-size: 20px;
      font-weight: bold;
    }
    .btn-box {
      text-align: center;
      margin-top: 40px;
      > div {
        margin: 0 auto;
        width: 40%;
        font-size: 14px;
        background-color: #0081ff;
        border-radius: 3px;
        text-align: center;
        color: #ffffff;
        box-sizing: border-box;
        padding: 8px 20px;
        cursor: pointer;
      }
    }
  }
}
</style>